<template>
	<view :class="['main', evaluateXw.id ? 'echo_main' : '']">
		<!-- #ifndef MP-TOUTIAO -->
		<nav-bar ref="navRef" title="评价"></nav-bar>
		<!-- #endif -->

		<view class="tip">
			<image :src="$imgsUrl('0x72506104', true)" mode=""></image>
			<view class="">为「家的细节」打分，让每分用心被看见</view>
		</view>

		<view class="tabs">
			<u-tabs
				:list="tabs"
				active-color="#486CF6"
				bg-color="transparent"
				inactive-color="#888888"
				:is-scroll="true"
				:bar-style="{ 'border-radius': '16rpx' }"
				:current="tabIdx"
				@change="changeTab"
			></u-tabs>
		</view>

		<!-- 评价区域 -->
		<!-- 商品/工艺 -->
		<view class="content shop_content" v-show="tabIdx === 1">
			<view class="card">
				<view class="tit">您对商品/工艺满意吗？</view>
				<view class="user flex">
					<view class="avatar">
						<image :src="$imgsUrl('0x72506105', true)" mode=""></image>
					</view>
					<view class="user_info">
						<view class="shop_name u-line-1">商品名称商品名称规格字段规格字段规格字段规格字段规格</view>
						<view class="shop_sku u-line-1">规格字段规格字段规格字段规格字段规格规格字段规格字段规格字段规格字段规格规格字段规格字段规格字段规格字段规格</view>
					</view>
				</view>
				<view class="ev_card">
					<view class="star flex">
						<view class="">总体</view>
						<view class="star_imgs flex">
							<image
								:src="form.starA < item ? starIcon : actStarIcon"
								mode=""
								v-for="item in [1, 2, 3, 4, 5]"
								:key="item"
								:data-item="item"
								@tap.stop="clickStar(item, 'starA')"
							></image>
						</view>
					</view>
					<view class="remark">
						<textarea v-model="form.remarkA" :disabled="evaluateXw.id" placeholder-class="pls" placeholder="我还有话说（选填）..." :maxlength="1000"></textarea>
						<view class="imgs"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 服务人员 -->
		<view class="content" v-show="isPayOrder && tabIdx === 0">
			<view class="card">
				<view class="tit">您对住宅优化师满意吗？</view>
				<view class="user flex">
					<view class="avatar">
						<image :src="$imgsUrl('0x72506105', true)" mode=""></image>
					</view>
					<view class="user_info">
						<view class="flex user_row">
							<view class="">{{ dataSource.xiaowoPhone_dictText || "" }}</view>
						</view>
					</view>
				</view>
				<view class="star flex">
					<view class="">总体</view>
					<view class="star_imgs flex">
						<image
							:src="form.starA < item ? starIcon : actStarIcon"
							mode=""
							v-for="item in [1, 2, 3, 4, 5]"
							:key="item"
							:data-item="item"
							@tap.stop="clickStar(item, 'starA')"
						></image>
					</view>
				</view>
				<view class="remark">
					<textarea v-model="form.remarkA" :disabled="evaluateXw.id" placeholder-class="pls" placeholder="我还有话说（选填）..." :maxlength="1000"></textarea>
				</view>
			</view>

			<!-- 评价工程师 -->
			<view class="card" v-if="false">
				<view class="tit">您对工程小蜗满意吗？</view>
				<view class="user flex">
					<view class="avatar">
						<image :src="$imgsUrl('0x72505292', true)" mode=""></image>
					</view>
					<view class="user_info">
						<view class="flex_bw">
							<view class="user_info_tit">工程名称工程名称工程名工程名称工程名称工程名</view>
							<view class="flex right_txt">
								<view class="">服务内容</view>
								<u-icon name="arrow-right" color="#486CF6" :size="16"></u-icon>
							</view>
						</view>
						<view class="flex user_row">
							<view class="">江屿鹤</view>
							<view class="user_row_line"></view>
							<view class="">2025-05-21 18:00</view>
						</view>
					</view>
				</view>
				<view class="star flex">
					<view class="">总体</view>
					<view class="star_imgs flex">
						<image :src="form.starA < item ? starIcon : actStarIcon" mode="" v-for="item in [1, 2, 3, 4, 5]" :key="item" @tap.stop="clickStar(item, 'starA')"></image>
					</view>
				</view>
				<view class="remark">
					<textarea v-model="form.remarkA" placeholder-class="pls" placeholder="我还有话说（选填）..." :maxlength="255"></textarea>
				</view>

				<view class="user user_gc flex">
					<view class="avatar">
						<image :src="$imgsUrl('0x72505292', true)" mode=""></image>
					</view>
					<view class="user_info">
						<view class="flex_bw">
							<view class="user_info_tit">工程名称工程名称工程名工程名称工程名称工程名</view>
							<view class="flex right_txt">
								<view class="">服务内容</view>
								<u-icon name="arrow-right" color="#486CF6" :size="16"></u-icon>
							</view>
						</view>
						<view class="flex user_row">
							<view class="">江屿鹤</view>
							<view class="user_row_line"></view>
							<view class="">2025-05-21 18:00</view>
						</view>
					</view>
				</view>
				<view class="star flex">
					<view class="">总体</view>
					<view class="star_imgs flex">
						<image :src="form.starA < item ? starIcon : actStarIcon" mode="" v-for="item in [1, 2, 3, 4, 5]" :key="item" @tap.stop="clickStar(item, 'starA')"></image>
					</view>
				</view>
				<view class="remark">
					<textarea v-model="form.remarkA" placeholder-class="pls" placeholder="我还有话说（选填）..." :maxlength="255"></textarea>
				</view>
			</view>
			<!-- 评价工程师 -->
		</view>
		<!-- 评价区域 -->

		<!-- 空状态 -->
		<view class="flex_center" v-if="!isPayOrder && !loading" style="height: calc(100vh - 20vh)">
			<!-- <emptyCom emptyCl="" desc="暂无可评价内容" style="transform: translateY(-25%)" /> -->
		</view>

		<!-- 底部  v-if="!evaluateXw.id" -->
		<view class="footer flex" :style="{ display: !isPayOrder && !loading ? 'none' : 'flex' }">
			<view class="footer_left flex_center" @tap.stop="oneClickReview">
				<view :class="['select_icon flex_center', isOneClickReview ? 'act_select_icon' : '']">
					<image :src="$imgsUrl('0x72506108', true)" mode=""></image>
				</view>
				<view class="">一键好评</view>
			</view>
			<view :class="['footer_btn flex_center', form.starA ? 'act_footer_btn' : '']" @tap.stop="submit">提交</view>
		</view>
		<!-- 底部 -->
	</view>
</template>

<script>
// import { submitSalesEvaluation } from "@/api/comm";
// import mixin from "./mixin.js";
// import emptyCom from "@/components/emptyCom.vue";
// xiaowo_phone
export default {
	// components: { emptyCom },
	data() {
		return {
			tabs: [
				{
					name: "服务人员"
				},
				{
					name: "商品/工艺"
				}
			],
			tabIdx: 1,

			isPayOrder: 1,
			starIcon: "",
			actStarIcon: "",
			isOneClickReview: false,
			form: {
				starA: 0,
				remarkA: ""
			},
			query: { id: "" },
			evaluateXw: { id: "" },
			dataSource: { id: "" }
		};
	},
	onLoad(e) {
		this.getStarImg();
		if (e && e.id) {
			this.query = e;
			this.getDetail(e.id);
		}
	},
	watch: {
		"dataSource.evaluationList": function (val) {
			if (val) {
				//  评价-业务小蜗
				this.evaluateXw = (val || []).find((item) => item.type == 4) || {};
				this.form.starA = this.evaluateXw.rating || 0;
				this.form.remarkA = this.evaluateXw.comment || "";
			}
		}
	},
	methods: {
		changeTab(e) {
			this.tabIdx = e;
		},

		// 一键好评
		oneClickReview() {
			this.isOneClickReview = !this.isOneClickReview;
			if (this.isOneClickReview) {
				this.form.starA = 5;
			} else {
				this.form.starA = 0;
			}
		},
		// 提交
		submit() {
			if (!this.form.starA) {
				return uni.showToast({
					title: "请先完成评分",
					icon: "none"
				});
			}
			const params = [
				{
					comment: this.form.remarkA,
					rating: String(this.form.starA),
					targetUserPhone: this.dataSource.xiaowoPhone,
					targetUserName: this.dataSource.xiaowoPhone_dictText,
					type: "4"
				}
			];
			submitSalesEvaluation(this.dataSource.id, params)
				.then((res) => {
					if (res.data.code !== 200) throw res.data.message;
					uni.navigateTo({
						url: "./evaluateResult"
					});
				})
				.catch((err) => {
					uni.showToast({
						title: err || "操作失败",
						icon: "none"
					});
				});
		},
		// 加载图片
		getStarImg() {
			uni.getImageInfo({
				src: this.$imgsUrl("0x72506107", true),
				success: (res) => {
					this.starIcon = res.path;
				}
			});
			uni.getImageInfo({
				src: this.$imgsUrl("0x72506106", true),
				success: (res) => {
					this.actStarIcon = res.path;
				}
			});
		},
		clickStar(value, name) {
			// 查看的时候禁止点击
			if (this.evaluateXw.id) return;
			this.form[name] = value;
		}
	}
};
</script>

<style lang="less" scoped>
.main {
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	padding-bottom: calc(52rpx + 24rpx + 84rpx + env(safe-area-inset-bottom) / 2);
}
.main.emtpy_main {
	display: flex;
	align-items: center;
	justify-content: center;
}
.main.echo_main {
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom) / 2);
}

.tip {
	height: 74rpx;
	width: 100%;
	background-color: #fdfae9;
	color: #ee7f11;
	font-size: 24rpx;
	padding: 0 40rpx;
	display: flex;
	align-items: center;
	position: fixed;
	z-index: 7;
	image {
		width: 24rpx;
		height: 28rpx;
		margin-right: 16rpx;
	}
}

.content {
	padding: calc(98rpx + 112rpx) 24rpx 0 24rpx;
}

.card {
	padding: 24rpx 32rpx;
	background-color: #fff;
	border-radius: 24rpx;
	margin-bottom: 24rpx;
	.tit {
		border-bottom: 1px solid #f5f5f5;
		color: #222222;
		font-size: 32rpx;
		font-weight: bold;
		padding-bottom: 32rpx;
	}
	.remark {
		padding: 24rpx;
		background-color: #f7f8f9;
		border-radius: 8rpx;
		height: 130rpx;
		margin-top: 24rpx;
		.pls {
			color: #999;
		}
		textarea {
			height: 100%;
			font-size: 28rpx;
		}
	}
	.star {
		color: #222222;
		font-weight: bold;
		font-size: 28rpx;
		.star_imgs {
			margin-left: 32rpx;
			image {
				width: 56rpx;
				height: 56rpx;
				margin-right: 16rpx;
			}
		}
	}
	.user.user_gc {
		padding-top: 76rpx !important;
	}
	.user {
		color: #444444;
		font-size: 28rpx;
		padding: 40rpx 0;
		.avatar {
			width: 88rpx;
			height: 88rpx;
		}
		.user_info {
			width: calc(100% - 88rpx);
			padding-left: 34rpx;
			.user_row {
				padding-top: 8rpx;
				.user_row_line {
					width: 1px;
					height: 28rpx;
					background-color: #bbbbbb;
					margin: 0 16rpx;
				}
			}
			.user_info_tit {
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
				width: 370rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.right_txt {
				font-size: 24rpx;
				color: #486cf6;
				view {
					padding-right: 12rpx;
				}
			}
		}
	}
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #ffffff;
	padding: 24rpx 46rpx calc(52rpx + env(safe-area-inset-bottom) / 2) 0;
	box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.05);
	font-size: 28rpx;
	// #0A264F
	.footer_left {
		width: calc(100% - 442rpx);
		color: #555555;
	}
	.select_icon.act_select_icon {
		border: 1px solid transparent;
		image {
			transform: scale(1);
		}
	}
	.select_icon {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 1px solid #999999;
		margin-right: 16rpx;
		image {
			transition: all 0.2s;
			transform: scale(0);
		}
	}
	.act_footer_btn {
		background-color: #0a264f !important;
	}
	.footer_btn {
		background-color: #d0d0d0;
		color: #fff;
		border-radius: 8rpx;
		height: 84rpx;
		width: 442rpx;
		font-size: 30rpx;
		transition: all 0.3s;
		font-weight: bold;
	}
}

.tabs {
	position: fixed;
	left: 0;
	top: 74rpx;
	width: 100%;
	background-color: transparent;
	height: 112rpx;
	font-size: 30rpx;
	display: flex;
	align-items: center;
}
.shop_content {
	.card {
		.user {
			.user_info {
				.shop_name {
					color: #333333;
					font-size: 30rpx;
					font-weight: bold;
				}
				.shop_sku {
					color: #444;
					font-size: 28rpx;
					padding-top: 4rpx;
				}
			}
		}
	}
}
</style>
